<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 632px;
        height: 340px;
        border: 1px solid black;
        margin: 100px auto
    }

    .box img {
        transform: translate(100px, 50px);
        transition: all;
    }
</style>

<body>
    <!-- 2D转换
    属性名:transform
    作用:对元素进行移动,缩放,转动,拉长或拉伸。 -->

    <!-- 位移 translate()
    transform的属性值为translate()时,可以实现位移效果
    书写语法：
    translate(x,y) x,y分别为水平和垂直方向位移的距离,可以为px值或百分比,区分正负
    translate(x) 只有一个数值 表示水平方向的位移 -->\

    <div class="box"><img src="../小黑.jpg" alt=""></div>

</body>

</html>